<template>
	<div class="w1024-wrap">
		<div class="page">
			<p class="page-title">订单详情</p>
			<div class="info-block order-info" v-if="obj.circletype==1">
				<div class="form-item">
					<p class="form-item-title" style="padding-right: 56px;">反馈</p>
				</div>
				<div class="clear">
					<div class="form-item left" style="width: 50%;margin-right: 0;">
						<p class="form-item-title">订单编号：</p>
						<div class="form-item-content">
							<p>{{obj.ordernum}}</p>
						</div>
					</div>
					<div class="form-item left" style="width: 50%;margin-right: 0;">
						<p class="form-item-title">订单状态：</p>
						<div class="form-item-content">
							
							<span v-if="obj.orderstatus==1">待支付</span>
							<span v-if="obj.orderstatus==2" class="red">已支付</span>
							<span v-if="obj.orderstatus==6" class="red">已取消</span>
						</div>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-content order-status">
						<p v-for="item in orderRecords">{{item.createtime+'('+item.operatorname+')'+item.orderstatusdes}}</p>
					</div>
				</div>
			</div>
			<div class="info-block">
				<div class="form-item">
					<p class="form-item-title">集团名称：</p>
					<div class="form-item-content">
						<p>{{obj.circlename}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">联系人：</p>
					<div class="form-item-content">
						<p>{{obj.linkman}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">联系电话：</p>
					<div class="form-item-content">
						<p style="font-size: 16px;">{{obj.linkphone}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">成员号码：</p>
					<div class="form-item-content clear">
						<div class="number-item" v-for="item in obj.phoneList">{{item}}</div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">号码统计：</p>
					<div class="form-item-content">
						<div class="para">
							<span style="margin-right: 18px;">电信<font style="color: red;">{{phoneAndFeeInfo.dxnum}}</font>个</span>
							<span style="margin-right: 18px;">移动<font style="color: red;">{{phoneAndFeeInfo.ydnum}}</font>个</span>
							<span style="margin-right: 18px;">联通<font style="color: red;">{{phoneAndFeeInfo.ltnum}}</font>个</span>
						</div>
					</div>
				</div>
			</div>
			<div class="info-block">
				<div class="form-item">
					<p class="form-item-title">套餐类型：</p>
					<div class="form-item-content">
						<p>{{productNameList[obj.smstype-1]}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">选择套餐：</p>
					<div class="form-item-content">
						<p>{{productLevelList[obj.comboid-1]}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐说明：</p>
					<div class="form-item-content">
						<p class="para">
							<span style="margin-right: 14px;">电信</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.dxfee?phoneAndFeeInfo.dxfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.dxquantity}}</font>条短信</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">移动</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.ydfee?phoneAndFeeInfo.ydfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.ydquantity}}</font>条短信</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">联通</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.ltfee?phoneAndFeeInfo.ltfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.ltquantity}}</font>条短信</span>
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">有效期：</p>
					<div class="form-item-content">
						<p>{{obj.openmonth}}个月</p>
					</div>
				</div>
				<div class="form-item" v-if="obj.begintime">
					<p class="form-item-title">生效开始时间：</p>
					<div class="form-item-content">
						<p>{{obj.begintime==1?'本月':'下月'}}</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<p class="para fee">
							<span style="margin-right: 25px;">电信</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.dxnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{obj.dxfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.dxnum*obj.dxfee*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para fee">
							<span style="margin-right: 25px;">移动</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.ydnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{obj.ydfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.ydnum*obj.ydfee*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para fee">
							<span style="margin-right: 25px;">联通</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.ltnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{obj.ltfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.ltnum*obj.dxfee*obj.openmonth/100}}</font>元</span>
						</p>
					</div>
				</div>
				<div class="form-item" v-if="obj.couponfee">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<p class="total-money">
							<span>{{obj.orderfee/100}}</span> 元
						</p>
					</div>
				</div>
				<div class="form-item" v-if="obj.couponfee">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<p class="orange">
							<span>{{obj.couponfee/100}}</span> 元
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title" style="line-height: 40px;">共计支付：</p>
					<div class="form-item-content">
						<p class="total-money">
							<span style="font-size: 30px;">{{(obj.orderstatus==1?obj.orderfee:obj.realfee)/100}}</span> 元
						</p>
					</div>
				</div>
			</div>
			<div class="info-block" v-if="obj.ordertype!=3">
				<div class="form-item">
					<p class="form-item-title">资质：</p>
					<div class="form-item-content">
						<div class="form-item flex" v-if="qualificationurldx.img" style="margin-bottom: 0;display: flex;">
							<p class="form-item-title text-left" style="width: 56px;font-weight: normal;position: relative;">电信</p>
							<div class="form-item-content" style="padding-left: 0px;padding-top: 8px;">
								<div class="upload-wrapper" v-for="(item,index) in qualificationurldx.img">
									<div class="img-wrap">
										<img @click="viewImage(item.url)" :src="item.url" />
									</div>
									<p class="img-tip">营业执照</p>
								</div>
							</div>
						</div>
						<div class="form-item flex" v-if="qualificationurlyd.img" style="margin-bottom: 0;display: flex;">
							<p class="form-item-title text-left" style="width: 56px;font-weight: normal;position: relative;">移动</p>
							<div class="form-item-content" style="padding-left: 0px;padding-top: 8px;">
								<div class="upload-wrapper" v-for="(item,index) in qualificationurlyd.img">
									<div class="img-wrap">
										<img @click="viewImage(item.url)" :src="item.url" />
									</div>
									<p class="img-tip">营业执照</p>
								</div>
							</div>
						</div>
						<div class="form-item flex" v-if="qualificationurllt.img||(acceptmaterial.img&&acceptmaterial.img[0].url)" style="margin-bottom: 0;display: flex;">
							<p class="form-item-title text-left" style="width: 56px;font-weight: normal;position: relative;">联通</p>
							<div class="form-item-content" style="padding-left: 0px;padding-top: 8px;">
								<div class="upload-wrapper" v-for="item in qualificationurllt.img">
									<div class="img-wrap">
										<img @click="viewImage(item.url)" :src="item.url" />
									</div>
									<p class="img-tip">营业执照</p>
								</div>
								<div class="upload-wrapper" v-for="item in acceptmaterial.img">
									<div class="img-wrap">
										<img @click="viewImage(item.url)" :src="item.url" />
									</div>
									<p class="img-tip">受理单</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<template v-if="obj.isall!=1">
					<div class="form-item" v-if="obj.dxnum>0">
						<p class="form-item-title">电信短信内容：</p>
						<div class="form-item-content para">
							{{obj.smstextcontentdx}}
						</div>
					</div>
					<div class="form-item" v-if="obj.ydnum>0">
						<p class="form-item-title">移动短信内容：</p>
						<div class="form-item-content para">
							{{obj.smstextcontentyd}}
						</div>
					</div>
					<div class="form-item" v-if="obj.ltnum>0">
						<p class="form-item-title">联通短信内容：</p>
						<div class="form-item-content para">
							{{obj.smstextcontentlt}}
						</div>
					</div>
				</template>
				<div v-else class="form-item">
					<p class="form-item-title">短信内容：</p>
					<div class="form-item-content para">
						{{obj.smstextcontent}}
					</div>
				</div>
			</div>
			<div class="btn-wrap flex flex-justify-center" style="border-top: 1px solid #f5f5f5;">
				<el-button size="medium" type="primary" @click="back">返回</el-button>
			</div>
		</div>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	import MessageEditor from '@/components/MessageEditor'
	import {getCookie} from '@/utils/common'
	export default {
		name: 'GroupManage',
		components: {
			MessageEditor,
		},
		data() {
			return {
				productNameList: ['挂机短信（文字版）', '挂机短信（视频版）', '挂短+彩铃'],
				productLevelList: ['基础套餐', '标准套餐', '高级套餐'],
				qualificationurlyd:{},
				qualificationurllt:{},
				qualificationurldx:{},
				acceptmaterial:{},
				obj: {
					circlecommonuid:this.$route.params.circlecommonuid,
					circletype:getCookie('circletype'),
					
					promisematerial:'',
				},
				orderInfo:{},
				orderRecords:[],
				phoneAndFeeInfo: {},
			}
		},
		mounted() {
			this.getOrderDetail()
		},
		methods: {
			getGroupDetail(yys){
				this.$request.queryGroupDetail({
					circlecommonuid:this.obj.circlecommonuid,
					merchant:yys
				})
				.then(res=>{
					if(res.code==0){
						var obj=res.circledetail[0]?res.circledetail[0]:{}
						this.obj.linkphone=obj.linkphone
						this.obj.linkman=obj.linkman
						console.log(obj)
					}
				})
			},
			getOrderDetail(){
				this.$request.queryOrderDetail({
					ordernum:this.$route.params.ordernum,
					circletype:getCookie('circletype')
				}).then(res=>{
					if(res.code==0){
						var linkphone=this.obj.linkphone||res.orderinfo.linkphone
						Object.assign(this.obj,res.orderinfo)
						this.qualificationurldx=this.obj.qualificationurldx
						this.qualificationurlyd=this.obj.qualificationurlyd
						this.qualificationurllt=this.obj.qualificationurllt
						this.acceptmaterial=this.obj.acceptmaterial
						this.obj.linkphone=linkphone||this.obj.linkphone
						this.orderRecords=res.records
						this.queryPhoneAndFee()
						this.getGroupDetail()
					}else{
						this.msgError(res.msg)
					}
				})
			},
			queryPhoneAndFee() {
				console.log({
					phones: this.obj.phoneList.join(','),
					comboid: this.obj.comboid,
					smstype: this.obj.smstype,
					month:this.obj.openmonth,
				})
				this.$request.queryPhoneAndFee({
					phones: this.obj.phoneList.join(','),
					comboid: this.obj.comboid,
					smstype: this.obj.smstype,
					month:this.obj.openmonth,
				}).then(res => {
					if(res.code == 0) {
						this.phoneAndFeeInfo = res
					} else {
						this.msgError(res.msg)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.w1024-wrap {
		.page{
			padding-left: 20px;
    		padding-right: 20px;
		}
		.page-title {
			height: 78px;
			line-height: 78px;
			color: #333;
			font-size: 18px;
			padding-left: 10px;
			font-weight: bold;
		}
		.info-block {
			border-top: 1px solid #f5f5f5;
			padding-top: 24px;
			.form-item {
				display: block;
				margin-bottom: 8px;
				position: relative;
				.form-item-title {
					font-size: 16px;
					width: 138px;
					position: absolute;
					left: 0;
					top: 0;
					font-weight: bold;
				}
				.form-item-content {
					font-size: 18px;
					width: auto;
					padding-left: 138px;
					
					.number-item{
						line-height: 32px;
						margin-right: 29px;
						float: left;
						font-weight: normal;
						font-size: 16px;
					}
					
					.info-para {
						font-size: 16px;
					}
					.para {
						font-size: 16px;
					}
					.total-money {
						color: #F39800;
						font-weight: bold;
						font-size: 18px;
					}
					.form-item-title{
						font-weight: normal;
						color: #666;
					}
				}
			}
		}
		.order-info{
			.form-item-content{
				font-size: 16px!important;
			}
			.order-status{
				padding-left: 50px!important;
			}
		}
		.upload-wrapper {
			width: 100px;
			height: 120px;
			margin-right: 20px;
			margin-bottom: 20px;
			float: left;
			position: relative;
			.img-wrap{
				width: 100%;
				height: 100px;
				background: #f5f5f5;
				>img {
					width: 100%;
					height: 100px;
					display: block;
				}
			}
			.img-tip{
				text-align: center;
				color: #999;
				line-height: 32px;
				font-size: 14px;
			}
		}
	}
</style>